<template>
  <div>
    <div>
      <el-button type="primary" @click="pullform">添加账号</el-button>
    </div>
    <br>
    <div class="cardadminlist">
        <transition name="el-zoom-in-center">
        <el-card class="box-card" v-show="visible">
            <el-input v-model="username" placeholder="账号"></el-input>
            <el-input v-model="password" placeholder="密码" show-password></el-input>
            <el-input v-model="Qpassword" placeholder="确认密码" show-password></el-input>
            <el-button type="primary" size="medium" @click="addadmin">添加</el-button>
            <el-button size="medium" @click="cancle">取消</el-button>
        </el-card>
        </transition>
    </div>
    <div>
    <el-table :data="tableData" border style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="username" label="用户名" width="160" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期" width="200" align="center">
        </el-table-column>
        <el-table-column prop="createUser" label="创建者" width="160" align="center">
        </el-table-column>
        <el-table-column prop="updateUser" label="操作者" width="160" align="center">
        </el-table-column>
        <el-table-column label="账号状态" width="160" align="center">
          <template slot-scope="scope">
              {{scope.row.isFrozen == '1' ? '冻结' : '正常' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="scope">
            <el-button :disabled="scope.row.isFrozen == '1' ? false : true" size="mini" @click="infrozen(scope.row.id)">解冻</el-button>
            <el-button :disabled="scope.row.isFrozen == '1' ? true : false" type="danger" size="mini" @click="frozen(scope.row.id)">冻结</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Vue from 'vue'
import axios from "axios"
Vue.component(CollapseTransition.name, CollapseTransition)

export default {
  data () {
    return {
      tableData:[],
      username:"",
      password:"",
      Qpassword:"",
      visible:false,
    }
  },
  methods: {
    /*  控制表格颜色 */
    tableRowClassName({row}) {
        if (row.isFrozen == "1") {
          return 'warning-row';
        } /* else if (row.isFrozen == 1) {
          return 'success-row';
        } */
        return '';
      },
    infrozen(val){
      axios.put(this.url + "/admin/update",{
        "id":val,
        "isFrozen":0,
        "updateUser":localStorage.getItem("username")
      }).then((res) => {
        if(res.data.code == 1){
          this.$message.success("修改成功")
          this.getadminlist()
        }
      }).catch(() => {
        this.$message.error("未知错误修改失败")
      });
    },
    frozen(val){
      axios.put(this.url + "/admin/update",{
        "id":val,
        "isFrozen":1,
        "updateUser":localStorage.getItem("username")
      }).then((res) => {
        if(res.data.code == 1){
          this.$message.success("修改成功")
          this.getadminlist()
        }
      }).catch(() => {
        this.$message.error("未知错误修改失败")
      });
    },
    getadminlist(){
        axios.get(this.url + "/admin/list").then((res) => {
          if(res.data.code == 1){
            this.tableData = res.data.data
          }
        }).catch(() => {
          this.$message.error("页面加载失败")
        });
    },
    pullform(){
      this.visible = !this.visible;
      this.username = ''
      this.password = ''
      this.Qpassword = ''
    },
    cancle(){
      this.visible = false
      this.username = ''
      this.password = ''
      this.Qpassword = ''
    },
    addadmin(){
      if(this.username == '' || this.password == "" || this.Qpassword == ''){
        this.$message.error("账号或密码不能为空")
        return
      }
      if(this.password != this.Qpassword){
        this.$message.warning("两次输入的密码不一致")
        return
      }
      axios.post(this.url + "/admin/register",{
        "username":this.username,
        "password":this.password,
        "createUser":localStorage.getItem("username")
      }).then((res) => {
        if(res.data.code == 1){
          this.$message.success("添加成功")
          this.cancle()
          this.getadminlist()
        }else{
          this.$message.error(res.data.msg)
        }
      }).catch(() => {
        this.$message.error("未知错误注册失败")
        this.cancle()
      });
    },
  },
  mounted () {
    axios.get(this.url + "/admin/list").then((res) => {
          if(res.data.code == 1){
            this.tableData = res.data.data
          }
        }).catch(() => {
          this.$message.error("页面加载失败")
        });
  }
}
</script>

<style scoped>
    .el-card{
        width: 400px;
        height: 320px;
        background-color: rgb(powderblue,powderblue,255,0.9);
        border-radius: 15px;
    }
    .cardadminlist{
        position: absolute;
        top: 25%;
        left: 35%;
        line-height: 70px;
        padding-left: 20px;
        padding-right: 20px;
        z-index: 999;
    }
    .el-table .warning-row {
    background: oldlace;
  }

    .el-table .success-row {
      background: #ffff;
    }
</style>